<template>
  <div id="outer">
    <h1>管理系统</h1>
    <span>学校名称：{{schoolName}}</span>
     &nbsp;&nbsp;&nbsp;&nbsp;
    <span>学校数量:{{schoolNum}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span >学生姓名：{{studentName}}</span>
    <School ref="getSchool" @getschoolNum='getschoolNum'/>
    <hr>
    <Student ref="getStudent" />
  </div>
</template>

<script>
import School from './components/school';
import Student from './components/student'

export default {
  name:'App',
  components:{
    School,
    Student
  },
  data(){
    return{
      schoolNum:0,
      schoolName:'',
      studentName:''
    }
  },
  methods:{
    getschoolNum(schoolNum){
      this.schoolNum=schoolNum
    }
  },
 mounted(){
  // console.log(this.$refs.getSchool,'schoolschool');  $refs为一个对象 里面有所有的 ref属性的Dom元素和组件实例
  // this.$refs.getSchool可以获取到对应的组件实例

  // 在School组件的实例上绑定一个自定义事件
  this.$refs.getSchool.$on('getSchoolName',(schoolName)=>{
    console.log(schoolName);
    this.schoolName = schoolName
  });
  
  // 在Student组件的实例上绑定一个自定义事件
  this.$refs.getStudent.$on('getStudentName',(studentName)=>{
    console.log(studentName);
    this.studentName = studentName
  })
 }
}
</script>

<style>
  #outer{
    background-color: antiquewhite;
    width: 700px;
    height: 500px;
    margin: 0 auto;
  }
</style>